<template>
  <div id="staMenuSeDiv">
    <Splitpanes style="height: 100%">
      <Pane size="50">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getStaMenuList" @keyup="keyupEnter" @search-click="getStaMenuList()"></vxe-input>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="tloading" @click="getStaMenuList"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="addStaMenuDialog()"></vxe-button>
            <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteStaMenu"></vxe-button>
            <!-- <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="同步" :loading="tloading" @click="sysStaMenu"></vxe-button> -->

          </template>
        </vxe-toolbar>

        <div class="modulTable">
          <vxe-table ref="staMenuTableRef" class="mytable-scrollbar staMenuTableClazz" border="inner" align="center" height="auto" :data="staMenuList" :loading="tloading" @current-change="menuRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
            <vxe-column type="checkbox" width="30"></vxe-column>
            <vxe-column field="icon" title="图标" width="50">
              <template #default="{ row }">
                <el-icon size="20" class="icon">
                  <component :is="row.icon"></component>
                </el-icon>
              </template>
            </vxe-column>
            <vxe-column field="staMenuCode" title="标准编号" width="100">
            </vxe-column>
            <vxe-column field="menuCode" title="功能编号" width="100">
            </vxe-column>
            <vxe-column field="menuTitle" title="功能名称" width="100">
            </vxe-column>
            <vxe-column field="url" title="路径" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left" width="120">
              <template #default="{ row }">
                <span>{{ row.url }}</span>
              </template>
            </vxe-column>
            <vxe-column field="isDefault" title="是否系统默认" width="100">
              <template #default="{ row }">
                <el-tag :type="getIsTagType(row.isDefault)">{{ getIsStatusDesc(row.isDefault) }}</el-tag>
              </template>
            </vxe-column>
            <vxe-column field="isAssembly" title="是否组件" width="100">
              <template #default="{ row }">
                <el-tag :type="getIsTagType(row.isAssembly)">{{ getIsStatusDesc(row.isAssembly) }}</el-tag>
              </template>
            </vxe-column>
            <vxe-column field="isReport" title="是否报表" width="100">
              <template #default="{ row }">
                <el-tag :type="getIsTagType(row.isReport)">{{ getIsStatusDesc(row.isReport) }}</el-tag>
              </template>
            </vxe-column>
            <vxe-column field="isTool" title="是否工具栏显示" width="100">
              <template #default="{ row }">
                <el-tag :type="getIsTagType(row.isTool)">{{ getIsStatusDesc(row.isTool) }}</el-tag>
              </template>
            </vxe-column>
            <vxe-column field="isDictMenu" title="是否字典型菜单" width="100">
              <template #default="{ row }">
                <el-tag :type="getIsTagType(row.isDictMenu)">{{ getIsStatusDesc(row.isDictMenu) }}</el-tag>
              </template>
            </vxe-column>
            <vxe-column field="reportName" title="模板名称" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left" width="120">
              <template #default="{ row }">
                <span>{{ row.reportName }}</span>
              </template>
            </vxe-column>
            <vxe-column field="reportUrl" title="模版路径" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left" width="120">
              <template #default="{ row }">
                <span>{{ row.reportUrl }}</span>
              </template>
            </vxe-column>

            <vxe-column field="openWith" title="组件弹框模式" :edit-render="{ autofocus: '.vxe-input--inner' }" align="center" width="120">
              <template #default="{ row }">
                <span>{{ formatCommon(tkmsList, row.openWith) }}</span>
              </template>
            </vxe-column>
            <vxe-column field="parentName" title="所属上级" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left" width="120">
              <template #default="{ row }">
                <span>{{ row.parentName }}</span>
              </template>
            </vxe-column>
            <vxe-column field="seq" title="顺序" width="50">
            </vxe-column>
          </vxe-table>
          <vxe-pager align="left" min-height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="[
                'PrevJump',
                'PrevPage',
                'Number',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total'
              ]" @page-change="handleSizeChange($event)"></vxe-pager>
        </div>
      </Pane>
      <Pane size="50">
        <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
          <el-tab-pane label="基础信息" name="first">
            <vxe-toolbar perfect>
              <template #buttons>
                <vxe-button type="text" class="button-blue" @click="saveStaMenu('staMenuFormRef')" icon="vxe-icon-square-plus" content="保存"></vxe-button>
              </template>
            </vxe-toolbar>
            <el-form ref="staMenuFormRef" :model="staMenuForm" :rules="staMenuFormRule" class="form-input-m" label-width="100px" inline-message>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="staMenuCode" label="标准编号">
                    <el-input type="text" v-model="staMenuForm.staMenuCode" placeholder="请输入标准编号" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="menuCode" label="功能编号">
                    <el-input type="text" v-model="staMenuForm.menuCode" placeholder="请输入功能编号" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="menuTitle" label="功能名称">
                    <el-input type="text" v-model="staMenuForm.menuTitle" placeholder="请输入功能名称	" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="icon" label="图标">
                    <el-input type="text" v-model="staMenuForm.icon" placeholder="请输入图标" clearable @click="showSelectIocn" ref="reficon"></el-input>
                    <SelectIcon ref="refselectIcon" @SelectIcon="selectIcon1"></SelectIcon>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="isAssembly" label="是否组件">
                    <vxe-switch v-model="staMenuForm.isAssembly" size="mini" open-label="是" close-label="否" open-value="1" close-value="0"></vxe-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="isReport" label="是否报表">
                    <vxe-switch v-model="staMenuForm.isReport" size="mini" open-label="是" close-label="否" open-value="1" close-value="0"></vxe-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="isTool" label="是否工具栏显示">
                    <vxe-switch v-model="staMenuForm.isTool" size="mini" open-label="是" close-label="否" open-value="1" close-value="0"></vxe-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="isDictMenu" label="是否字典型菜单">
                    <vxe-switch v-model="staMenuForm.isDictMenu" size="mini" open-label="是" close-label="否" open-value="1" close-value="0"></vxe-switch>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="reportName" label="模板名称">
                    <el-input type="text" v-model="staMenuForm.reportName" placeholder="请输入模板名称" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="reportUrl" label="模版路径">
                    <el-input type="text" v-model="staMenuForm.reportUrl" placeholder="请输入模版路径" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="url" label="路径">
                    <el-input type="text" v-model="staMenuForm.url" placeholder="请输入路径" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="openWith" label="组件弹框模式">
                    <vxe-select v-model="staMenuForm.openWith" filterable>
                      <vxe-option v-for="tkms in tkmsList" :key="tkms.id" :label="tkms.name" :value="tkms.code"></vxe-option>
                    </vxe-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="seq" label="顺序号">
                    <el-input type="text" v-model="staMenuForm.seq" placeholder="请输入顺序号" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="isDefault" label="是否系统默认">
                    <el-switch v-model="staMenuForm.isDefault" inline-prompt active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="description" label="功能描述">
                    <CkEditor ref="refCkEditor" :value="staMenuForm.description" folderId="system123" @editorInput="(val)=>staMenuForm.description=val" style="width:81%" />
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';
import SelectIcon from '@/components/SelectIcon.vue';
import CkEditor from '@/components/CkEditor.vue';

defineExpose({ initPage });
let searchForm = {
  searchValue: ''
};
let tloading = ref(false); //加载状态
let activeName = ref('first');
let refselectIcon = ref(null);
let staMenuList: any = reactive([]);
let sltStaMenu: any = ref({});
// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});

let staMenuForm = reactive({
  id: null,
  staMenuCode: '',
  menuCode: '',
  menuTitle: '',
  url: '',
  icon: '',
  iconSelected: '',
  parentId: '',
  urlFlag: '',
  appUrl: '',
  appImage: '',
  appName: '',
  isCommonUse: '1',
  typeFlag: 1,
  isReport: '0',
  isAssembly: '0', //是否为组件
  isTool: '0', //是否工具栏显示
  reportId: '',
  reportUrl: '',
  isDictMenu: '0', //是否字典型菜单
  openWith: '',
  moduleId: '',
  description: '',
  isDefault: 0,
  seq: 1,
  orgId: ''
});

let staMenuFormRule = {
  menuTitle: [
    {
      required: true,
      message: '请输入功能名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ],
  menuCode: [
    {
      required: true,
      message: '请输入功能编码',
      trigger: 'blur'
    }
  ],
  staMenuCode: [
    {
      required: true,
      message: '请输入标准功能编号',
      trigger: 'blur'
    }
  ]
};
onMounted(() => {
  getDictDetailList();
});
function initPage() {
  getStaMenuList();
}

let tkmsList: any = reactive([]); //检验组option下拉数据
// 获取检验组option下拉数据
function getDictDetailList() {
  tkmsList.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
    .get(url, { params: { code: 'TKMS' } })
    .then((res: any) => {
      tkmsList.push(...res.data);
    })
    .catch((err: any) => {
      VxeMessage('获取弹框模式下拉数据异常', VxeNotifyType.error);
    });
}

function getStaMenuList() {
  tloading.value = true;
  staMenuList.length = 0; //放入数据前清空数据
  const url = '/lis/sta/staMenu/findStaMenuPageList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        seachValue: searchForm.searchValue,
        pageIndex: page.currentPage,
        pageSize: page.pageSize
      }
    })
    .then((res: any) => {
      staMenuList.push(...res.data.records);
      page.totalResult = res.data.total;
      const kn = staMenuList.find((k) => k.id == sltStaMenu.value.id);
      if (isEmpty(kn)) {
        menuRowClick({ row: staMenuList[0] }); //默认选中第一条数据
      } else {
        menuRowClick({ row: kn }); //默认选中第一条数据
      }
      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function sysStaMenu() {
  tloading.value = true;
  staMenuList.length = 0; //放入数据前清空数据
  const url = '/lis/sta/staMenu/sysStaMenu';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        seachValue: searchForm.searchValue,
        pageIndex: page.currentPage,
        pageSize: page.pageSize
      }
    })
    .then((res: any) => {
      staMenuList.push(...res.data.records);
      page.totalResult = res.data.total;
      const kn = staMenuList.find((k) => k.id == sltStaMenu.value.id);
      if (isEmpty(kn)) {
        menuRowClick({ row: staMenuList[0] }); //默认选中第一条数据
      } else {
        menuRowClick({ row: kn }); //默认选中第一条数据
      }
      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

//点击每页数量(分页查询)
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  getStaMenuList();
}

function saveStaMenu(formName: any) {
  let $el = proxy.$refs[formName];
  $el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    if (staMenuForm.id === null) {
      const url = '/lis/sta/staMenu/addStaMenu';
      const staMenu = {
        staMenuCode: staMenuForm.staMenuCode,
        menuCode: staMenuForm.menuCode,
        menuTitle: staMenuForm.menuTitle,
        url: staMenuForm.url,
        icon: staMenuForm.icon,
        iconSelected: staMenuForm.iconSelected,
        parentId: staMenuForm.parentId,
        urlFlag: staMenuForm.urlFlag,
        appUrl: staMenuForm.appUrl,
        appImage: staMenuForm.appImage,
        appName: staMenuForm.appName,
        isCommonUse: staMenuForm.isCommonUse,
        typeFlag: staMenuForm.typeFlag,
        isReport: staMenuForm.isReport,
        isAssembly: staMenuForm.isAssembly,
        isTool: staMenuForm.isTool,
        reportId: staMenuForm.reportId,
        reportUrl: staMenuForm.reportUrl,
        isDictMenu: staMenuForm.isDictMenu,
        openWith: staMenuForm.openWith,
        moduleId: staMenuForm.moduleId,
        description: staMenuForm.description,
        isDefault: staMenuForm.isDefault,
        seq: staMenuForm.seq
      };
      proxy.$http
        .post(url, staMenu)
        .then((res: any) => {
          VxeMessage('新增成功', VxeNotifyType.success);
          clearForm();
          sltStaMenu.value.id = res.data.id;
          getStaMenuList();
        })
        .catch((err: any) => {
          VxeMessage('新增失败', VxeNotifyType.error);
        });
    } else {
      // 修改用户
      const url = '/lis/sta/staMenu/editStaMenu';

      const staMenu = {
        id: staMenuForm.id,
        staMenuCode: staMenuForm.staMenuCode,
        menuCode: staMenuForm.menuCode,
        menuTitle: staMenuForm.menuTitle,
        url: staMenuForm.url,
        icon: staMenuForm.icon,
        iconSelected: staMenuForm.iconSelected,
        parentId: staMenuForm.parentId,
        urlFlag: staMenuForm.urlFlag,
        appUrl: staMenuForm.appUrl,
        appImage: staMenuForm.appImage,
        appName: staMenuForm.appName,
        isCommonUse: staMenuForm.isCommonUse,
        typeFlag: staMenuForm.typeFlag,
        isReport: staMenuForm.isReport,
        isAssembly: staMenuForm.isAssembly,
        isTool: staMenuForm.isTool,
        reportId: staMenuForm.reportId,
        reportUrl: staMenuForm.reportUrl,
        isDictMenu: staMenuForm.isDictMenu,
        openWith: staMenuForm.openWith,
        moduleId: staMenuForm.moduleId,
        description: staMenuForm.description,
        isDefault: staMenuForm.isDefault,
        seq: staMenuForm.seq
      };
      proxy.$http
        .post(url, staMenu)
        .then((res: any) => {
          VxeMessage('修改成功', VxeNotifyType.success);
          sltStaMenu.value.id = res.data.id;
          setTimeout(() => {
            clearForm();
            getStaMenuList();
          }, 50);
        })
        .catch((err: any) => {
          VxeMessage('修改失败', VxeNotifyType.error);
        });
    }
  });
}
function deleteStaMenu() {
  const sltStaMenus = (proxy.$refs.staMenuTableRef as any).getCheckboxRecords();
  if (!(sltStaMenus.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(async () => {
        //后台删除数据
        const delStaMenuList = sltStaMenus.filter((p: any) => !isEmpty(p.id));
        if (delStaMenuList.length > 0) {
          const data = { staMenuList: delStaMenuList };
          const url = '/lis/sta/staMenu/batchDeleteStaMenuList';
          proxy.$http
            .post(url, data)
            .then((res: any) => {
              getStaMenuList(); // 获取检验仪器表格数据
              VxeMessage(res.status.msg, VxeNotifyType.success);
            })
            .catch((err: any) => {
              VxeMessage(err, VxeNotifyType.error);
            });
        }
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}
// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getStaMenuList();
  }
}
// 点击设计模式表格当前行触发右侧表单变化
function menuRowClick({ row }: any) {
  if (isEmpty(row)) {
    clearForm();
    sltStaMenu.value = {};
  } else {
    (proxy.$refs.staMenuTableRef as any).setCurrentRow(row);
    setStaMenuForm(row);
  }
}

function addStaMenuDialog() {
  clearForm();
  sltStaMenu.value = {};
  (proxy.$refs.staMenuTableRef as any).clearCurrentRow();
  activeName.value = 'first';
}

// 清空中间规则弹框表单
function clearForm() {
  staMenuForm.id = null;
  staMenuForm.staMenuCode = '';
  staMenuForm.menuCode = '';
  staMenuForm.menuTitle = '';
  staMenuForm.url = '';
  staMenuForm.icon = '';
  staMenuForm.iconSelected = '';
  staMenuForm.parentId = '';
  staMenuForm.urlFlag = '';
  staMenuForm.appUrl = '';
  staMenuForm.appImage = '';
  staMenuForm.appName = '';
  staMenuForm.isCommonUse = '1';
  staMenuForm.typeFlag = 1;
  staMenuForm.isReport = '0';
  staMenuForm.isAssembly = '0'; //是否为组件
  staMenuForm.isTool = '0'; //是否工具栏显示
  staMenuForm.reportId = '';
  staMenuForm.reportUrl = '';
  staMenuForm.isDictMenu = '0'; //是否字典型菜单
  staMenuForm.openWith = '';
  staMenuForm.moduleId = '';
  staMenuForm.description = '';
  staMenuForm.isDefault = 0;
  staMenuForm.seq = 1;
  staMenuForm.orgId = '';
}

// 编辑当前行规则
function setStaMenuForm(row: any) {
  staMenuForm.id = row.id;
  staMenuForm.staMenuCode = row.staMenuCode;
  staMenuForm.menuCode = row.menuCode;
  staMenuForm.menuTitle = row.menuTitle;
  staMenuForm.url = row.url;
  staMenuForm.icon = row.icon;
  staMenuForm.iconSelected = row.iconSelected;
  staMenuForm.parentId = row.parentId;
  staMenuForm.urlFlag = row.urlFlag;
  staMenuForm.appUrl = row.appUrl;
  staMenuForm.appImage = row.appImage;
  staMenuForm.appName = row.appName;
  staMenuForm.isCommonUse = row.isCommonUse;
  staMenuForm.typeFlag = row.typeFlag;
  staMenuForm.isReport = row.isReport;
  staMenuForm.isDefault = row.isDefault;
  staMenuForm.isAssembly = row.isAssembly;
  staMenuForm.isTool = row.isTool;
  staMenuForm.reportId = row.reportId;
  staMenuForm.reportUrl = row.reportUrl;
  staMenuForm.isDictMenu = row.isDictMenu;
  staMenuForm.openWith = row.openWith;
  staMenuForm.moduleId = row.moduleId;
  staMenuForm.seq = row.seq;
  staMenuForm.orgId = row.orgId;
  staMenuForm.description = row.description;
  const temp: any = proxy.$refs['refCkEditor'];
  if (isEmpty(staMenuForm.description)) {
    temp.setValue('');
  } else {
    temp.setValue(staMenuForm.description);
  }
  sltStaMenu.value = row;
}

function tabHandleClick(tab: any) {}
function selectIcon1(icon: any) {
  staMenuForm.icon = icon;
  setTimeout(() => {
    proxy.$refs.reficon.blur();
  }, 100);
}
function showSelectIocn() {
  refselectIcon.value.initPage(true);
}
function formatCommon(arr, value) {
  for (const item of arr) {
    if (item.code == value) {
      return item.name;
    }
  }
}

// 获取是否静态的tag标记(绿/红)
function getIsTagType(row: any) {
  if (row == '1') {
    return 'success';
  } else {
    return 'danger';
  }
}
// 获取是否静态文字(是/否)
function getIsStatusDesc(row: any) {
  if (row == '1') {
    return '是';
  } else {
    return '否';
  }
}
const predefineColors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
</script>

<style lang="scss" scoped>
#staMenuSeDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .modulTable {
    height: calc(100% - 40px - 30px);
    background-color: $base-white;
  }
}
</style>